<template>
	<view>
		<!-- 开关状态 -->
		<view class="status status_on">
			<view class="fui-flex justify-center">
				<view class="status_img" v-if="device_status.select_num <= 3 ">
					<image :src="showStatusOne ? switchOffUrl  : switchOnUrl " mode="" style="width: 100%;height: 100%;"
						@click="statusOneBtn"></image>
				</view>
				<view class="status_img" v-if="device_status.select_num > 1 && device_status.select_num <= 3">
					<image :src="showStatusTwo ? switchOffUrl  : switchOnUrl " mode="" style="width: 100%;height: 100%;"
						@click="statusTwoBtn"></image>
				</view>
				<view class="status_img" v-if="device_status.select_num === 3">
					<image :src="showStatusThree ? switchOffUrl  : switchOnUrl " mode=""
						style="width: 100%;height: 100%;" @click="statusThreeBtn"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ddiotSwitch',
		props: {
			device_id: {
				type: Number,
				default: 0
			},
			// showIcon: {
			// 	type: Boolean,
			// 	default: true
			// },
			// iconType: {
			// 	type: String,
			// 	default: 'auto'
			// },
			// iconSize: {
			// 	type: Number,
			// 	default: 24
			// },
			// color: {
			// 	type: String,
			// 	default: '#777777'
			// },
			// contentText: {
			// 	type: Object,
			// 	default () {
			// 		return {
			// 			contentdown: '',
			// 			contentrefresh: '',
			// 			contentnomore: ''
			// 		}
			// 	}
			// },
			// showText: {
			// 	type: Boolean,
			// 	default: true
			// }
		},
		data() {
			return {
				// 展示
				showStatus: true,
				showStatusOne: false,
				showStatusTwo: false,
				showStatusThree: false,
				switchOffUrl: '../static/images/switch_close.png', //关闭的状态
				switchOnUrl: '../static/images/switch_open.png', //开启的状态
				backgroundColor: [235, 249, 251],
				// 数据
				device_status: {},
				recordList: [],
				page: {
					page: 1,
					pageSize: 10,
					total: 0
				}
			};
		},
		onLoad() {
			let that = this
			that.$nextTick(function(){
				console.log('服务状态',that.UniSocket._connectioned)
			})
			
			that.UniSocket.on('operation_error', function(data) {
				console.log('操作监听 operation_error监听回来', data);
			},true);
			that.UniSocket.on('operation_start', function(data) {
			    console.log('操作监听 operation_start监听回来', data);
			},true);
			that.UniSocket.on('operation_end', function(data) {
			    console.log('操作监听 operation_end', data);
			},true);
			that.UniSocket.on('operation_success', function(data) {
				console.log('操作监听',data)
				if (data.data.res == 200) {
					uni.hideLoading()
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				}
			},true);
				
		},
		onShow() {
			let that = this
			that.getDevInfo()
		},
		onReachBottom() {
			if (this.page.page * this.page.pageSize < this.page.total) {
				this.page.page++
				this.getOperationLog()
			} else {
				uni.showToast({
					title: '已经加载完毕',
					icon: 'none'
				})
			}
		},
		methods: {
			getDevInfo(){
				let that = this
				that.fui
					.request('/diandi_hotel/device/device/devinfo', 'GET', {
						device_id: that.device_id
					}, false).then(res => {
						console.log('设备信息',res.data.device_status)
						that.device_status = res.data.device_status
						that.showStatusOne = Boolean(res.data.device_status.electric_86)
						that.showStatusTwo = Boolean(res.data.device_status.electric_86_02)
						console.log(that.showStatusTwo);
						that.showStatusThree = Boolean(res.data.device_status.electric_86_03)
												
						that.getOperationLog()
					}).catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					})
			},
			getOperationLog() {
				this.fui.request('', 'GET', {
					version: 1,
					page: this.page.page,
					pageSize: this.page.pageSize,
					project_id: 11,
					device_id: this.device_status.device_id
				}, true, {
					url: 'http://iot.ddicms.cn/api/device/log'
				}).then(res => {
					this.recordList = [...this.recordList, ...res.data.list]
					this.$set(this.page, 'total', res.data.total)
				}).catch(err => {
					console.log(err, '错误');
				})
			},
			changeSwtichOpen(num) {
				let that = this
				that.UniSocket.emit("operation", {
					"device_id": Number(that.device_status.device_id),
					"behavior": "open",
					"switch_code": num + '',
				}, 'receptacle', 'switchDev', 'index');
				uni.showLoading({
					title: '开灯中',
					mask: true
				})
			},
			changeSwtichClose(num) {
				let that = this
				that.UniSocket.emit("operation", {
					"device_id": Number(that.device_status.device_id),
					"behavior": "shut",
					"switch_code": num + '',
				}, 'receptacle', 'switchDev', 'index');
				uni.showLoading({
					title: '关灯中',
					mask: true
				})
			},
			statusOneBtn() {
				let that = this
				that.showStatusOne = !that.showStatusOne
				that.$set(that.device_status, 'electric_86', Number(that.showStatusOne))
				if (that.showStatusOne === true) {
					that.changeSwtichOpen(1)
					// statusObj.status = '关闭'
					that.getOperationLog()
				} else {
					that.changeSwtichClose(1)
					// statusObj.status = '开启'
					that.getOperationLog()
				}
			},
			statusTwoBtn() {
				let that = this
				that.showStatusTwo = !that.showStatusTwo
				that.$set(that.device_status, 'electric_86_02', Number(that.showStatusTwo))
				if (that.showStatusTwo === true) {
					that.changeSwtichOpen(2)
					// statusObj.status = '关闭'
					that.getOperationLog()
				} else {
					that.changeSwtichClose(2)
					// statusObj.status = '开启'
					that.getOperationLog()
				}
			},
			statusThreeBtn() {
				let that = this
				that.showStatusThree = !that.showStatusThree
				that.$set(that.device_status, 'electric_86_03', Number(that.showStatusThree))
				if (that.showStatusThree === true) {
					that.changeSwtichOpen(3)
					// statusObj.status = '关闭'
					that.getOperationLog()
				} else {
					that.changeSwtichClose(3)
					// statusObj.status = '开启'
					that.getOperationLog()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 624rpx;

		.status {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 712rpx;
			background-color: #EBF9FB;

			.status_img {
				width: 200rpx;
				height: 512rpx;
				margin-top: 144rpx;
			}

		}

		.status_record {
			margin: 48rpx 32rpx 32rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.card {
			margin-top: 0;
			box-shadow: 0rpx 5rpx 20rpx 1rpx rgba(209, 209, 209, 0.3);

			.status_title {
				font-size: 32rpx;
				color: #141414;
			}

		}
	}
</style>